<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签页（Tab）插件</title>
	<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
	  <script src="script/jquery-1.10.min.js"></script>
	<script src="script/bootstrap-3.3.7.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
	<li class="active"> <!--这里是 默认 激活-->
		<a href="#home" data-toggle="tab"> <!-- href 跳转到 #home id-->
			 菜鸟教程
		</a>
	</li>
	<li><a href="#ios" data-toggle="tab" id='ios_tab'>iOS</a></li>
	<li class="dropdown">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" 
		   data-toggle="dropdown">Java 
			<b class="caret"></b>
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">  <!--这里是 home id -->
		<p>点击IOS tab标签，打开模态框</p>
	</div>
	<div class="tab-pane fade" id="ios">


			<h2>创建模态框（Modal）</h2>
			<!-- 按钮触发模态框 -->
			<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
				开始演示模态框,提交后，查看console.log
			</button>
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="height: auto;"> <!--模态框 长度伸缩，与下面滚动条 冲突-->
					<div class="modal-content">
						<div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>  
			        </button>  
			        <h4 class="modal-title" id="modalLabel">表格</h4></div>  
			      <div id="_modalDialog_body" class="modal-body">  

			            <!--  设置这个div的大小，超出部分显示滚动条  DIV包住整个表格-->  
			        <!-- <div id="selectTree" class="ztree" style="height:300px;overflow:auto; ">    -->


								<table id="t" class="table">
									<thead>
										<th></th>
										<th></th>
										<th>序号</th>
										<th>任务名称</th>
										<th>任务标签</th>
									</thead>
									<tbody>
<!-- 									<tr class='icon'>
<td><a href='#' class='btn-unfold'> <span class='glyphicon glyphicon-plus'></span> </a></td>
									<td>1</td>
									<td>2</td>
									<td>3</td>
									</tr>
									<tr class='table_tr'>
										<td colspan='6'>
												<table class='table' style='display:none;'>
												<thead>
												<th></th>
													<th></th>

													<th>创建用户</th>
													<th>统计次数</th>
													<th>应用名称</th>

												</thead>
												<tbody>
												<tr><td></td>
												<td> <input type=checkbox data-target=></td>
												<td>11</td><td>22</td><td>33</td></tr>
												</tbody>
												</table>
											</td>
									</tr> -->

								</tbody>
								</table>
							<!-- </div> -->

			  
			      </div>  
			      <div class="modal-footer">  
			        <button type="submit" id = "save" class="btn btn-primary">确定</button>  
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
			      </div>  
			    </div>  
			  </div>  
			</div>  







	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
		</p>
	</div>
</div>

</body>
<script type="text/javascript">
    var json_data_ex = {
        "data": [{
            "name": "测试1",
            "tag": "\u6d4b\u8bd5\u4efb\u52a1\u6807\u7b7e",
            "create_user": "org",
            "total_run_count": 36,
            "id": 1,
            "app_list": [{"app_name": "1231", "app_user": "456"},{"app_name": "787887", "app_user": "4566"},{"app_name": "777777777", "app_user": "88888888"}]
        }, {
            "name": "测试2",
            "tag": "\u6d4b\u8bd5\u4efb\u52a1\u6807\u7b7e",
            "create_user": "org",
            "total_run_count": 36,
            "create_time": "2018-06-04-15:19",
            "app_list": [{"app_name": "777", "app_user": "456"},{"app_name": "2222223", "app_user": "33333"}],
            "id": 7,
            "last_run_time": "2018-06-05 10:23"
        }], "success": true
    };

    function table_append(dom,data){
    	// console.log(1)
    	    $(dom + ' tbody').empty() //先清空 表格数据
            var table_str = ""

            $.each(data, function(index, obj) { // 通用方法，表格添加数据
        // alert(index +"-"+obj.tagName); index序号,
        	var index=index+1
            table_str+="<tr class='success'>\
<td><a href='#' class='btn-unfold'> <span class='glyphicon glyphicon-plus'></span> </a></td>\
									<td > <input id=father_"+obj.id+" type=checkbox data-target="+obj.id+"></td>\
									<td>"+index+"</td>\
									<td>"+obj.name+"</td>\
									<td>"+obj.tag+"</td>\
									</tr>\
									<tr class='table_tr'>\
												<td colspan='7'>\
														<table id= table_tr_"+obj.id +" class='table' style='display:none;'>\
														<thead>\
														<th></th>\
														<th></th>\
															<th>顺序</th>\
															<th></th>\
															<th>应用名称</th>\
															<th>创建用户</th>\
														</thead>\
														<tbody>"

					$.each(obj.app_list,function(i,obj_app){ //将样例数据 app_list字段继续遍历
						var s =""
						var i = i+1
						s+="<tr class='info' ><td></td>\
							<td class='sub_checkbox'> <input type=checkbox data-target="+obj.id+"></td>\
							<td class='order'>"+i+"</td>\
							<td><a href='#' class='btn-unfold'> <span class='glyphicon glyphicon-arrow-up'></span> <span class='glyphicon glyphicon-arrow-down'></span></a></td> \
							<td class='app_name'>"+obj_app.app_name+"</td>\
							<td>"+obj_app.app_user+"</td>\
							</tr>"

								table_str+=s
									});
					table_str+="</tbody>\
							</table>\
							</td>\
							</tr>"
			});

             // console.log(table_str)

            $(dom + ' tbody').append(table_str)

    }

    // table_append(("#t"),json_data_ex.data)
	$( "ios_tab" ).on( "click", table_append("#t",json_data_ex.data) );//点击ios,填充表格



	$("#save").on('click', function(event) {
		// var json_source_list=[]
		var json_obj = {}
		$("#t .success").each(function(index) {
			// console.log($(this).html())
			var c =$(this).find(':input')
			if (c.is(":checked")){
			
			var id =jQuery(c).data("target")
			console.log(id)
			var tmp_list=[]
			var sub_row = $(this).next() //下一行 就是子行

			// sub_row.each(function(index) {
			// 	console.log($(this).find('.order').text())
			// 	tmp_list.push({"order":$(this).find('.order').text(),
			// "app_name":$(this).find('app_name').text()})
			// });
			// json_obj[id]=tmp_list
				sub_row.find(":input").each(function(index) {
					if ($(this).is(":checked")){
						var order = $(this).parent().siblings('.order').text()
						var appname = $(this).parent().siblings('.app_name').text()
						tmp_list.push({"app_name":appname,"order":order})
						json_obj[id]=tmp_list
				}
				});
		}

		});
		console.log(json_obj)

	});

// 由于要 修改 HTML内容，jquery只能在页面加载时，加载一次元素
// 要写成   on("eventtype","selector",function(){}
// 子表顺序向上的箭头
	$("#t").on("click",".glyphicon-arrow-up",function(event){
		// console.log(11111111)
		var this_row=$(this).parent().parent().parent() //本行的对象
		// var this_row_prev_order = $(this).prev().text()


		if (this_row.prev().hasClass('info')){ //判断前一个同胞 也是tr
			// this_row.empty()
			// this_row.prev().empty()

			var this_row_html = this_row.html()
			var this_row_prev_html = this_row.prev().html()  //提取本行与前一行，HTML
			var this_row_order = this_row.find(".order").text()  //提取本行与前一行。order字段值
			var this_row_prev_order = this_row.prev().find('.order').text()
			// console.log(this_row_order,this_row_prev_order)

			//本行清空，追加前一行数据，在将order字段改为 之前的数值
			$(this_row).empty().append(this_row_prev_html).find(".order").text(this_row_order) 
			$(this_row.prev()).empty().append(this_row_html).find(".order").text(this_row_prev_order)
			// $(this_row).find(".order").text(this_row_prev_order)
			// $(this_row).prev().find(".order").text(this_row_order)


		}else{       					//没有前一个同胞，则是子表的第一个，则不用向上动，

			console.log('')

		}
	})




// 由于要 修改 HTML内容，jquery只能在页面加载时，加载一次元素
// 要写成   on("eventtype","selector",function(){}
// 子表顺序向下的箭头
	$("#t").on("click",".glyphicon-arrow-down",function(event){
		// console.log(11111111)
		var this_row=$(this).parent().parent().parent() //本行的对象
		// console.log(this_row.next())
		// console.log(this_row.next().parent())
		// console.log(this_row.prev()) //本行的前一个 同胞

		if (this_row.next().hasClass('info')){ //判断后一个同胞 也是tr
			// this_row.empty()
			// this_row.prev().empty()

			var this_row_html = this_row.html()
			var this_row_next_html = this_row.next().html()
			// console.log(this_row_html)

			var this_row_order = this_row.find(".order").text()  //提取本行与下一行。order字段值
			var this_row_next_order = this_row.next().find('.order').text()


			$(this_row).empty().append(this_row_next_html).find(".order").text(this_row_order) 
			$(this_row.next()).empty().append(this_row_html).find(".order").text(this_row_next_order)

		}else{       					//没有前一个同胞，则是子表的第一个，则不用向上动，

			console.log('')

		}
	})




	//选中子表， 关联父表
	$("#t").on("click",".sub_checkbox input[type=checkbox]",function(evnet){  //.sub_checkbox都是子表checkbox
			// console.log(jQuery($(this)).data("target"))
			var current_id = jQuery($(this)).data("target")
			if ($(this).is(":checked")){
					$("#father_"+current_id).prop("checked",true)
				}else{ //如果取消 遍历是否还有其它 选中的，有则 父表还是选中状态
					console.log(12324)
					//先取消 遍历有在 选中
					$("#father_"+current_id).attr("checked",false)
					$("#table_tr_"+current_id).find(".sub_checkbox :checkbox").each(function(i){
						console.log($(this))
						if ($(this).is(":checked")){
							console.log(222)
							$("#father_"+current_id).attr("checked",true)
							$("#father_"+current_id).prop("checked",true)
							return
						}
					})
				}
	});



//	选中父表 ，关联全部子表项选中
	$("#t tr.success [type=checkbox]").on("click",function(evnet){  //监听奇数行， 偶数行都是子表
//			console.log($(this).parent().parent().next().find("input[type=checkbox]"))
			var current = $(this).parent().parent().next().find("input[type=checkbox]")
			console.log($(this))
			console.log(current)
			if ($(this).is(":checked")){		//判断父表是否选中
					current.prop("checked",true);
				}else{
					current.removeAttr("checked");
				}
	});



    $("#t .glyphicon-plus").on("click",function(){  //父子表  展开 收缩
    	var t=$(this) //当前元素 span
			//   t 就span,父节点  a -> td -> tr 下一个是 后面一行
			//	在后代中找到带有  table类的 
    	console.log(t.parent().parent().parent().next().find(".table") )
    	var sub_table = t.parent().parent().parent().next().find(".table")

        if($(this).hasClass("glyphicon-plus")){ //通过 更改样式  + -号
        	sub_table.show()
            t.removeClass("glyphicon-plus");
            t.addClass("glyphicon-minus");
        }else{
        	sub_table.hide()
            t.removeClass("glyphicon-minus");
            t.addClass("glyphicon-plus");
        }
        })



</script>

</html>